<!-- subpkg_consult/payment/index.vue -->
<script lang="ts" setup>
  import { createOrderApi, orderPayApi } from '@/apis/consult'
  import { patientDetailApi } from '@/apis/patient'
  import { preOrderApi, useConsultStore } from '@/stores/consult'
  import type { OrderPreData } from '@/types/consult'
  import type { PatientItem } from '@/types/patient'
  import { ref } from 'vue'
  import ConsultPayment from '@/components/custom-payment/custom-payment.vue'

  const store = useConsultStore()
  const { type, illnessType } = store

  // 1.获取预支付的信息
  const preOrderInfo = ref<OrderPreData>({} as OrderPreData)
  const getPreOrderInfo = async () => {
    // 1.1 判断数据是否完整
    if (!store.illnessType || !store.type) {
      return uni.showModal({
        title: '温馨提示',
        content: '当前信息不完善,请重新收集信息',
        showCancel: false,
        confirmText: '重新收集',
        success() {
          uni.reLaunch({
            url: '/pages/index/index',
          })
        },
      })
    }
    // 1.2 请求接口
    const res = await preOrderApi({ type, illnessType })
    preOrderInfo.value = res
  }

  getPreOrderInfo()

  // 2. 获取患者详情
  const patientDetail = ref<PatientItem>({})
  const getPatientDetail = async () => {
    if (!store.patientId) return
    const res = await patientDetailApi(store.patientId)
    patientDetail.value = res
  }
  getPatientDetail()

  // 3. 获取订单的id
  const orderId = ref('')
  const paymentRef = ref()
  const onPaymentButtonClick = async () => {
    // 3.1 如果有订单id则提示
    if (orderId.value !== '') {
      return uni.showToast({
        title: '不能重复生成订单',
        icon: 'none',
      })
    }
    // 3.2 调用生产订单的接口函数
    const res = await createOrderApi({
      type: store.type, // 急速问诊
      illnessType: store.illnessType, // 三甲/普通
      depId: store.depId, // 科室
      patientId: store.patientId, //患者id
      illnessDesc: store.illnessInfo.illnessDesc, // 病情描述
      illnessTime: store.illnessInfo.illnessTime, // 患病时间
      consultFlag: store.illnessInfo.consultFlag, // 是否就诊
      pictures: store.illnessInfo.pictures, // 就诊图片
    })
    orderId.value = res.id

    // 3.3 清空仓库中存储的数据
    store.clear()

    // 3.4 打开支付抽屉弹层
    paymentRef.value.open()
  }

  // 4. 用户关闭弹层
  const onPaymentClose = async () => {
    const { confirm } = await uni.showModal({
      title: '关闭支付',
      content: '取消支付将无法获得医生回复，医生接诊名额有限，是否确认关闭？',
      cancelText: '仍要关闭',
      cancelColor: '#848484',
      confirmText: '继续支付',
      confirmColor: '#16C2A3',
    })
    if (!confirm) {
      // 关闭弹层
      paymentRef.value.close()
      // 引导到个人中心
      uni.switchTab({
        url: '/pages/my/index',
      })
    }
  }

  // 5. 用户点击了支付
  const onPaymentConfirm = async (index: number) => {
    // 5.1 如果是微信支付
    if (index === 0) {
      // #ifdef H5
      return uni.showToast({
        title: '当前暂不支付微信支付',
        icon: 'none',
      })
      // #endif
      // #ifdef MP-WEIXIN
      // uni.requestPayment({
      // })
      // #endif
    }
    // 5.2 如果是支付宝支付
    if (index === 1) {
      // #ifdef H5 || APP
      const res = await orderPayApi({
        paymentMethod: index.toString(),
        orderId: orderId.value,
        payCallback: 'http://localhost:5173/#/subpkg_consult/room/index',
      })
      // 完成跳转操作（站外跳转）
      window.location.href = res.payUrl
      // #endif
    }
  }
</script>

<template>
  <scroll-page>
    <view class="payment-page">
      <uni-section
        v-if="preOrderInfo.actualPayment"
        title-font-size="32rpx"
        title-color="#121826"
        padding="30rpx"
        :title="`图文问诊 ${preOrderInfo.payment}元`"
      >
        <uni-list :border="false">
          <uni-list-item
            title="极速问诊"
            note="自动分配医生"
            thumb="/static/uploads/doctor-avatar.jpg"
            thumb-size="lg"
          />
          <uni-list-item
            title="优惠券"
            show-arrow
            :right-text="`-¥${preOrderInfo.couponDeduction}.00`"
          />
          <uni-list-item title="积分抵扣">
            <!--#footer插槽 进行自定义样式  -->
            <template #footer>
              <view class="uni-list-text-red">-¥{{ preOrderInfo.pointDeduction }}.00</view>
            </template>
          </uni-list-item>
          <uni-list-item title="实付款">
            <template #footer>
              <view class="uni-list-text-red">¥{{ preOrderInfo.actualPayment }}.00</view>
            </template>
          </uni-list-item>
        </uni-list>
      </uni-section>

      <view v-else style="text-align: center">模拟骨架屏-loading</view>

      <view class="dividing-line"></view>

      <uni-section
        v-if="patientDetail.id"
        title-font-size="32rpx"
        title-color="#121826"
        padding="30rpx"
        title="患者资料"
      >
        <uni-list :border="false">
          <uni-list-item title="患者信息">
            <template #footer>
              <view class="uni-list-text-gray">
                {{ patientDetail.name }} | {{ patientDetail.genderValue }} |
                {{ patientDetail.age }}岁
              </view>
            </template>
          </uni-list-item>
          <uni-list-item border title="病情描述" :note="store.illnessInfo.illnessDesc" />
        </uni-list>
      </uni-section>
      <view v-else style="text-align: center">模拟骨架屏-loading</view>

      <!-- <view class="payment-agreement">
        <radio color="#20c6b2" value="1" />
        我已同意<text style="color: #20c6b2">支付协议</text>
      </view> -->
    </view>
    <!-- 下一步操作 -->
    <view class="next-step">
      <view class="total-amount">
        合计: <text class="number">¥{{ preOrderInfo.actualPayment }}.00</text>
      </view>
      <button class="uni-button" @click="onPaymentButtonClick">立即支付</button>
    </view>
  </scroll-page>
  <consult-payment
    ref="paymentRef"
    :order-id="orderId"
    :amount="preOrderInfo.actualPayment"
    @close="onPaymentClose"
    @confirm="onPaymentConfirm"
  ></consult-payment>
</template>

<style lang="scss">
  @import './index.scss';
</style>
